<template>
    <view class="Fushi_fushi__CUNvG">
        <view class="Fushi_top__tgxbm">
            <view class="Fushi_calculate__wBm54"><span class="Fushi_title_wrapper__cFV4k"><span
                        class="Fushi_title_icon__zDyOU"><span role="img" class="anticon"><svg width="1em" height="1em"
                                viewBox="0 0 1024 1024" fill="currentColor">
                                <path xmlns="http://www.w3.org/2000/svg" id="icon_fushi_01" class="cls-1"
                                    d="M842.714,975H181.286A132.285,132.285,0,0,1,49,842.714V181.286A132.285,132.285,0,0,1,181.286,49H842.714A132.285,132.285,0,0,1,975,181.286V842.714A132.285,132.285,0,0,1,842.714,975ZM253.1,757.2a33.071,33.071,0,1,0,46.77,46.77l46.77-46.77,46.77,46.77a33.071,33.071,0,1,0,46.77-46.77l-46.77-46.77,46.77-46.77a33.072,33.072,0,0,0-46.77-46.771l-46.77,46.771-46.77-46.771a33.072,33.072,0,0,0-46.77,46.771l46.77,46.77ZM445.857,313.571H379.714V247.429a33.072,33.072,0,1,0-66.143,0v66.142H247.429a33.072,33.072,0,1,0,0,66.143h66.142v66.143a33.072,33.072,0,1,0,66.143,0V379.714h66.143A33.072,33.072,0,1,0,445.857,313.571Zm330.714,0H578.143a33.072,33.072,0,1,0,0,66.143H776.571A33.072,33.072,0,1,0,776.571,313.571Zm0,297.643H578.143a33.072,33.072,0,1,0,0,66.143H776.571A33.072,33.072,0,1,0,776.571,611.214Zm0,132.286H578.143a33.072,33.072,0,1,0,0,66.143H776.571A33.072,33.072,0,1,0,776.571,743.5Z">
                                </path>
                            </svg></span></span><span>复式投注组数计算：</span>
                    <div class="MHeader_nav__lSiL2" @click="showHelpPopup = true">
                        <span role="img" class="anticon">
                            <svg width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor">
                                <path xmlns="http://www.w3.org/2000/svg" id="登录" class="cls-1"
                                    d="M511.989,23c269.628,0,489,219.339,489,489s-219.373,489-489,489c-269.658,0-489-219.342-489-489s219.34-489,489-489h0ZM231,832.917a35.6,35.6,0,0,1,22.558-33.669c23.145-9.132,80.462-35.905,151.634-48.591V735.508c-71.164-69.863-113.162-200.751-113.162-299.649,0-141.141,73.546-222.083,202.007-222.083,131.867,0,213.956,83.034,213.956,222.083,0,47.77-18.035,204.6-89.235,290.79V745.7c35.6,8.78,109.337,27.808,157.754,44.953,16.751,5.943,23.815,23.077,20.682,39.983A424.887,424.887,0,0,0,940.011,512c0-235.547-192.095-427.188-427.577-427.188C276.869,84.81,85.026,276.451,85.026,512c0,127.9,56.563,242.551,145.973,320.919h0Zm0,0">
                                </path>
                            </svg>
                        </span>
                        <div class="MHeader_nav_name__wkQXE">帮助</div>
                    </div>

                </span>
                <view class="Fushi_form_item__LgLYS">
                    <span>输入组合号码的数量</span>
                    <u--input placeholder="2~49之间" border="surround" v-model="formData.number"
                        @blur="validateNumber"></u--input>
                </view>
                <view class="Fushi_form_item__LgLYS" @click="showSex = true">
                    <span>选择每注号码个数</span>
                    <view style="
              border: 1px solid #eee;
              border-radius: 4px;
              height: 40px;
              display: flex;
              align-items: center;
              width: 250px;
              padding: 0 10px;
            ">
                        <u--input v-model="formData.group" disabled disabledColor="#ffffff" placeholder="请选择每注号码个数"
                            border="none"></u--input>
                        <image src="/static/up.svg" style="width: 20px; height: 20px"></image>
                    </view>
                </view>
                <button type="button" class="ant-btn css-v75wwf ant-btn-primary Fushi_calculate_btn__rBnV5"
                    @click="calculateCombinations">
                    <span>计 算</span>
                </button>
                <span class="Fushi_top_total__wetKS">生成全复式：<span class="Fushi_text_primary__BdSyd">{{
                    totalCombinations
                        }}</span>
                    注</span>
            </view>
            <span class="Fushi_usage__AEWfn"><span role="img" class="anticon"><svg width="1em" height="1em"
                        viewBox="0 0 1024 1024" fill="currentColor">
                        <path xmlns="http://www.w3.org/2000/svg" id="属性" class="cls-1"
                            d="M512,29C245.247,29,29,245.247,29,512S245.247,995,512,995,995,778.753,995,512C994.711,245.367,778.634,29.289,512,29Zm0,885.5C289.706,914.5,109.5,734.3,109.5,512S289.706,109.5,512,109.5,914.5,289.706,914.5,512C914.256,734.193,734.193,914.256,512,914.5Zm28.859-681.714A161,161,0,0,0,351,391.25a40.25,40.25,0,0,0,80.5,0,80.5,80.5,0,0,1,95.433-79.171,81.464,81.464,0,0,1,64.4,64.2,80.5,80.5,0,0,1-40.25,85.531A159.15,159.15,0,0,0,471.75,602.844V632.75a40.25,40.25,0,0,0,80.5,0V602.844a79.774,79.774,0,0,1,37.433-70.518A161,161,0,0,0,540.859,232.786ZM512,713.25h0a40.249,40.249,0,0,1,40.25,40.25h0A40.25,40.25,0,0,1,512,793.75h0a40.251,40.251,0,0,1-40.25-40.25h0A40.25,40.25,0,0,1,512,713.25Z">
                        </path>
                    </svg></span><span>使用说明</span></span>
        </view>
        <view class="Fushi_bottom__qGl5n">
            <view class="Fushi_head__v3U8D"><span class="Fushi_title_wrapper__cFV4k"><span
                        class="Fushi_title_icon__zDyOU"><span role="img" class="anticon"><svg width="1em" height="1em"
                                viewBox="0 0 1024 1024" fill="currentColor">
                                <path xmlns="http://www.w3.org/2000/svg" id="icon_fushi_02" class="cls-1"
                                    d="M842.714,975H181.286A132.285,132.285,0,0,1,49,842.714V181.286A132.285,132.285,0,0,1,181.286,49H842.714A132.285,132.285,0,0,1,975,181.286V842.714A132.285,132.285,0,0,1,842.714,975ZM313.571,280.5H181.286a33.072,33.072,0,1,0,0,66.143H313.571A33.072,33.072,0,1,0,313.571,280.5Zm0,198.429H181.286a33.071,33.071,0,1,0,0,66.142H313.571A33.071,33.071,0,1,0,313.571,478.929Zm0,198.428H181.286a33.072,33.072,0,1,0,0,66.143H313.571A33.072,33.072,0,1,0,313.571,677.357ZM578.143,280.5H445.857a33.072,33.072,0,0,0,0,66.143H578.143A33.072,33.072,0,0,0,578.143,280.5Zm0,198.429H445.857a33.071,33.071,0,1,0,0,66.142H578.143A33.071,33.071,0,0,0,578.143,478.929Zm0,198.428H445.857a33.072,33.072,0,0,0,0,66.143H578.143A33.072,33.072,0,0,0,578.143,677.357ZM842.714,280.5H710.429a33.072,33.072,0,1,0,0,66.143H842.714A33.072,33.072,0,1,0,842.714,280.5Zm0,198.429H710.429a33.071,33.071,0,1,0,0,66.142H842.714A33.071,33.071,0,1,0,842.714,478.929Zm0,198.428H710.429a33.072,33.072,0,1,0,0,66.143H842.714A33.072,33.072,0,1,0,842.714,677.357Z">
                                </path>
                            </svg></span></span><span>选号码/生肖生成复式</span></span>
                <view class="Fushi_tab__eF-1r">
                    <button :class="{ 'Fushi_cur__rIDn6': !isZodiac }" @click="switchToNumber">选号码</button>
                    <button :class="{ 'Fushi_cur__rIDn6': isZodiac }" @click="switchToZodiac">选生肖</button>
                </view>
            </view>
            <view>
                <view class="Fushi_win__Je3+G">
                    <table v-if="!isZodiac" cellpadding="0" cellspacing="0" class="Fushi_table__BuxKY">
                        <tbody>
                            <tr v-for="row in ballRows" :key="row[0].number">
                                <td v-for="ball in row" :key="ball.number"
                                    :class="{ 'Fushi_cur__rIDn6': selectedBalls.includes(ball.number) }"
                                    @click="toggleBall(ball.number)">
                                    <span v-if="ball.number" :class="[
                                        'Fushi_ball__UYrFB',
                                        {
                                            'Fushi_red__c8usj': ball.color === 'red',
                                            'Fushi_blue__9GSkt': ball.color === 'blue',
                                            'Fushi_green__-uiH5': ball.color === 'green',
                                        },
                                    ]">{{ ball.number.toString().padStart(2, "0") }}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div v-else class="Fushi_sheng_xiao_area__lj2lN">
                        <div v-for="zodiac in zodiacs" :key="zodiac" :class="[
                            'Fushi_sheng_xiao_ball_wrapper__A24+T',
                            { 'Fushi_cur__rIDn6': selectedZodiacs.includes(zodiac) }
                        ]" @click="toggleZodiac(zodiac)">
                            <span class="Fushi_sheng_xiao_ball__IU3r0">{{ zodiac }}</span>
                        </div>
                    </div>
                </view>
                <view class="Fushi_area__a9CeE">
                    <view>
                        <span>已选择了<span class="Fushi_text_primary__BdSyd">{{ selectedCount }}</span>
                            <template v-if="!isZodiac">个号码</template>
                            <template v-else>个生肖</template>
                            ，每注
                            <template v-if="!isZodiac">号码</template>
                            <template v-else>生肖</template>
                            组成个数：
                        </span>
                        <button type="button"
                            class="ant-btn css-v75wwf ant-btn-default Fushi_select_btn__bh6ch Fushi_select_btn_m__JG8r6"
                            @click="showBottomSelect = true">
                            <span>{{ formData.bottomGroup || '每组2个' }}</span>
                            <span role="img" class="anticon">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                                    height="1em" width="1em">
                                    <path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z">
                                    </path>
                                </svg>
                            </span>
                        </button>
                    </view>
                    <view class="Fushi_btn_wrapper__6OjMt"><button type="button"
                            class="ant-btn css-v75wwf ant-btn-primary" @click="generateCombinations">
                            <span>生成复式</span></button><button type="button"
                            class="ant-btn css-v75wwf ant-btn-default Fushi_clear_btn__oI7hh" @click="clearSelection">
                            <span>清 空</span>
                        </button>
                    </view>
                </view>
            </view>
        </view>
        <u-action-sheet :show="showSex" :actions="actions" title="选择每注号码个数" description="" @close="showSex = false"
            @select="sexSelect">
        </u-action-sheet>
        <u-action-sheet :show="showBottomSelect" :actions="actions" :title="`选择每注${isZodiac ? '生肖' : '号码'}个数`"
            description="" @close="showBottomSelect = false" @select="bottomGroupSelect">
        </u-action-sheet>
        <u-popup :show="showResultPopup" mode="center" @close="showResultPopup = false" :round="10" closeable>
            <view class="result-popup">
                <view class="result-title">组合结果</view>
                <view class="result-desc">
                    你选择共{{ selectedCount }}个{{ isZodiac ? '生肖' : '号码' }},设置每组{{ formData.bottomGroup }},共生成{{
                    combinations.length }}组复式
                </view>
                <scroll-view scroll-y class="result-list">
                    <view v-for="(item, index) in combinations" :key="index" class="result-item">
                        <template v-if="isZodiac">
                            <text class="zodiac-text" v-for="zodiac in item" :key="zodiac">{{ zodiac }}</text>
                        </template>
                        <template v-else>
                            <text :class="getBallColorClass(num)" v-for="num in item" :key="num">{{
                                num.toString().padStart(2, '0') }}</text>
                        </template>
                    </view>
                </scroll-view>
                <view class="copy-btn-wrapper">
                    <button class="copy-btn" @click="copyResults">复制结果</button>
                </view>
            </view>
        </u-popup>
        <u-popup :show="showHelpPopup" mode="center" @close="showHelpPopup = false" :round="10" closeable>
            <view class="Fushi_fushi_help_wrapper__hqz0d">
                <div>
                    <h6>一、什么是复式计算</h6>
                    <p>六合复式计算工具可对多个号码(2~49个)或生肖(2~12个)进行不完全重复组合，计算出相应组合数量和排列。</p>
                    <h6>二、计算方式说明</h6>
                    <p>1.复式投注组数计算：填写组合号码或生肖的数量，选择每组号码或生肖个数计算复式。</p>
                    <p>2.选号码/生肖生成复式：可选择49个号码中任意号码或者12个生肖中任意生肖进行组合搭配，选择每组号码或生肖个数后计算复式。</p>
                    <h6>三、重要说明</h6>
                    <p>1.号码数量：指六合彩有49个球或12个生肖，从中选择需计算的数量，进行投注组合(至少选择2个、最多选择49个)；</p>
                    <p>2.每注号码个数：指每一注所组成的球数或生肖数，每注投注可由2~6个球数组成；</p>
                    <p>3.选择号码的数值必须大于1，小于或等于49；</p>
                    <p>4.选择号码的数值≥每注号码个数；</p>
                    <p>5.关于选号码生成的复式组数结果，如果组数结果≤2000条，则详细显示当前所有的排列组合；如果组数结果＞2000条，不显示详细的组合结果。</p>
                </div>
            </view>
        </u-popup>
    </view>
</template>
<style lang="scss" scoped>
@import "@/styles/multiple.css";

.number-input {
    height: 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
}

// 处理编译后的uni-input样式
:deep(.uni-input-wrapper) {
    position: relative;
    width: 100%;
    height: 100%;
}

:deep(.uni-input-input) {
    width: 100%;
    height: 100%;
    line-height: 30px;
    font-size: 14px;
}

:deep(.uni-input-placeholder) {
    height: 30px;
    line-height: 30px;
}

// 调整下拉框样式
:deep(.u-select) {
    width: 200px;
    height: 30px;

    .u-select__action {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
    }
}

.result-popup {
    width: 90vw;
    max-height: 80vh;
    padding: 20px;
    box-sizing: border-box;

    .result-title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
    }

    .result-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
        text-align: center;
    }

    .result-list {
        max-height: 60vh;
    }

    .result-item {
        display: flex;
        padding: 10px;
        border-bottom: 1px solid #eee;

        text {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            margin-right: 10px;
            font-size: 14px;

            &.zodiac-text {
                width: auto;
                min-width: 40px;
                padding: 0 10px;
                background-color: #ff9800;
                color: #fff;
                border-radius: 15px;
            }

            &.red {
                background-color: #f5222d;
                color: #fff;
            }

            &.blue {
                background-color: #1890ff;
                color: #fff;
            }

            &.green {
                background-color: #52c41a;
                color: #fff;
            }
        }
    }
}

.Fushi_fushi_help_wrapper__hqz0d {
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
    width: 90vw;
    background: #fff;

    h6 {
        font-size: 16px;
        font-weight: bold;
        margin: 15px 0 10px;

        &:first-child {
            margin-top: 0;
        }
    }

    p {
        font-size: 14px;
        line-height: 1.5;
        margin: 8px 0;
        color: #666;
    }
}

.copy-btn-wrapper {
    padding: 15px;
    text-align: center;
}

.copy-btn {
    background-color: #1890ff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
}

// 调整result-list的最大高度，为底部按钮留出空间
.result-list {
    max-height: calc(60vh - 50px);
}
</style>

<script>
export default {
    data() {
        return {
            showSex: false,
            showBottomSelect: false,
            numberValue: "",
            show: false,
            formData: {
                number: "",
                group: "",
                bottomGroup: "每组2个",
            },
            actions: [
                {
                    name: "每组2个",
                },
                {
                    name: "每组3个",
                },
                {
                    name: "每组4个",
                },
                {
                    name: "每组5个",
                },
                {
                    name: "每组6个",
                },
            ],
            selectedNumber: "每组2个",
            balls: Array.from({ length: 49 }, (_, i) => ({
                number: i + 1,
                color: this.getBallColor(i + 1),
            })),
            totalCombinations: 0,
            selectedBalls: [],
            showResultPopup: false,
            combinations: [],
            isZodiac: false,
            zodiacs: ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'],
            selectedZodiacs: [],
            showHelpPopup: false,
        };
    },
    computed: {
        ballRows() {
            const rows = [];
            for (let i = 0; i < this.balls.length; i += 7) {
                rows.push(this.balls.slice(i, i + 7));
            }
            // Pad the last row with empty objects if needed
            const lastRow = rows[rows.length - 1];
            while (lastRow.length < 7) {
                lastRow.push({});
            }
            return rows;
        },
        selectedCount() {
            return this.isZodiac ? this.selectedZodiacs.length : this.selectedBalls.length;
        }
    },
    methods: {
        sexSelect(e) {
            this.formData.group = e.name;
        },
        confirm(e) {
            this.selectedNumber = e[0].label;
        },
        getBallColor(number) {
            // Define the color pattern
            const colorPattern = {
                red: [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46],
                blue: [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 47, 48],
                green: [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 49],
            };

            if (colorPattern.red.includes(number)) return "red";
            if (colorPattern.blue.includes(number)) return "blue";
            if (colorPattern.green.includes(number)) return "green";
            return "";
        },
        combination(n, r) {
            if (n < r) return 0;

            // 使用公式 C(n,r) = n!/(r!(n-r)!)
            let result = 1;
            for (let i = 1; i <= r; i++) {
                result *= (n - i + 1) / i;
            }
            return Math.round(result);
        },
        calculateCombinations() {
            // 获取输入值
            const number = parseInt(this.formData.number);
            const groupStr = this.formData.group;

            // 检查是否已输入所有必要信息
            if (!number || !groupStr) {
                uni.showModal({
                    title: "提示",
                    content: "请输入组合号码数量并选择每注号码个数",
                    showCancel: false,
                });
                return;
            }

            // 从选择的组字符串中提取数字
            const group = parseInt(groupStr.replace(/[^0-9]/g, ""));

            // 验证输入范围
            if (number < 2 || number > 49) {
                uni.showModal({
                    title: "提示",
                    content: "组合号码数量必须在2~49之间",
                    showCancel: false,
                });
                return;
            }

            // 验证number是否小于group
            if (number < group) {
                uni.showModal({
                    title: "提示",
                    content: "选择的号码数量不能小于每注号码个数",
                    showCancel: false,
                });
                return;
            }

            // 计算组合数
            this.totalCombinations = this.combination(number, group);
        },
        validateNumber(value) {
            if (value) {
                // 只有当有值时才验证
                const num = parseInt(value);
                if (num < 2 || num > 49) {
                    uni.showModal({
                        title: "提示",
                        content: "请输入2~49之间的数字",
                        showCancel: false,
                    });
                    this.formData.number = "";
                }
            }
        },
        toggleBall(number) {
            const index = this.selectedBalls.indexOf(number);
            if (index === -1) {
                this.selectedBalls.push(number);
            } else {
                this.selectedBalls.splice(index, 1);
            }
        },
        bottomGroupSelect(e) {
            this.formData.bottomGroup = e.name;
            this.showBottomSelect = false;
        },
        getBallColorClass(number) {
            const color = this.getBallColor(number);
            return {
                'red': color === 'red',
                'blue': color === 'blue',
                'green': color === 'green'
            };
        },
        generateCombinations() {
            const isZodiacMode = this.isZodiac;
            const selectedItems = isZodiacMode ? this.selectedZodiacs : this.selectedBalls;

            // 检查是否有选择
            if (selectedItems.length === 0) {
                uni.showModal({
                    title: '提示',
                    content: `请先选择${isZodiacMode ? '生肖' : '号码'}`,
                    showCancel: false
                });
                return;
            }

            // 获取每组数量
            const groupSize = parseInt(this.formData.bottomGroup.replace(/[^0-9]/g, ''));

            // 检查选择的数量是否足够
            if (selectedItems.length < groupSize) {
                uni.showModal({
                    title: '提示',
                    content: `选择的${isZodiacMode ? '生肖' : '号码'}数量不能小于每注${isZodiacMode ? '生肖' : '号码'}个数`,
                    showCancel: false
                });
                return;
            }

            // 生成组合
            this.combinations = this.getCombinations(selectedItems, groupSize);

            // 显示弹窗
            this.showResultPopup = true;
        },
        getCombinations(arr, size) {
            const result = [];

            // 递归数生成组合
            function backtrack(start, current) {
                if (current.length === size) {
                    result.push([...current]);
                    return;
                }

                for (let i = start; i < arr.length; i++) {
                    current.push(arr[i]);
                    backtrack(i + 1, current);
                    current.pop();
                }
            }

            backtrack(0, []);
            return result;
        },
        clearSelection() {
            if (this.isZodiac) {
                this.selectedZodiacs = [];
            } else {
                this.selectedBalls = [];
            }
            this.formData.bottomGroup = "每组2个";
            this.combinations = [];
            this.showResultPopup = false;
        },
        switchToNumber() {
            this.isZodiac = false;
            this.clearSelection();
        },
        switchToZodiac() {
            this.isZodiac = true;
            this.clearSelection();
        },
        toggleZodiac(zodiac) {
            const index = this.selectedZodiacs.indexOf(zodiac);
            if (index === -1) {
                this.selectedZodiacs.push(zodiac);
            } else {
                this.selectedZodiacs.splice(index, 1);
            }
        },
        copyResults() {
            // 格式化组合结果为文本
            const text = this.combinations.map(combo => {
                if (this.isZodiac) {
                    return combo.join(',');
                } else {
                    return combo.map(num => num.toString().padStart(2, '0')).join(',');
                }
            }).join('\n');

            // 使用uni-app的复制API
            uni.setClipboardData({
                data: text,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        }
    },
};
</script>
